<template>
	<cl-popup
		v-model="spec.visible"
		direction="bottom"
		:border-radius="[32, 32, 0, 0]"
		:padding="0"
		show-close-btn
		@open="onOpen"
	>
		<view class="goods-spec">
			<view class="goods">
				<goods-cover :item="spec.goods" :spec="spec.info" :link="false" :size="160" />

				<view class="det">
					<cl-row :margin="[0, 0, 16, 0]">
						<cl-text
							:value="spec.info?.price || spec.goods?.price"
							type="price"
							color="error"
							:size="40"
							bold
						/>
						<cl-text
							color="info"
							:size="24"
							:margin="[0, 0, 0, 30]"
							:value="`库存：${stock}`"
							v-if="spec.info"
						/>
					</cl-row>

					<cl-text
						:ellipsis="2"
						:line-height="1.2"
						:color="spec.info ? 'primary' : 'info'"
						:value="spec.text"
					/>
				</view>
			</view>

			<cl-row type="flex" justify="space-between" :margin="[0, 24, 16, 24]">
				<cl-text bold>规格分类（{{ list.length + 1 }}）</cl-text>

				<cl-icon
					:size="40"
					:class-name="`${isGrid ? 'shop-icon-list' : 'shop-icon-list2'}`"
					@tap="isGrid = !isGrid"
				/>
			</cl-row>

			<!-- 规格列表 -->
			<cl-loading-mask :loading="loading">
				<scroll-view scroll-y class="scroller">
					<view
						class="list"
						:class="{
							'is-grid': isGrid,
						}"
					>
						<cl-row :gutter="20">
							<cl-col
								v-for="(item, label) in list"
								:key="label"
								:span="isGrid ? 8 : 24"
							>
								<view
									class="item"
									:class="{
										'is-active': spec.info?.id == item.id,
										'is-disabled': !item.stock,
									}"
									@tap="select(item)"
								>
									<view class="cover">
										<goods-cover
											:item="spec.goods"
											:spec="item"
											:link="false"
											:radius="isGrid ? 24 : 12"
											:zoom="isGrid"
										/>
									</view>

									<view class="name">
										<text>{{ item.name }}</text>
									</view>
								</view>
							</cl-col>
						</cl-row>

						<cl-list-item
							label="数量"
							:arrow-icon="false"
							:margin="[0, -10, 0, -10]"
							v-if="spec.info"
						>
							<cl-input-number v-model="spec.num" :min="1" :max="stock" />
						</cl-list-item>
					</view>
				</scroll-view>
			</cl-loading-mask>

			<!-- 底部按钮 -->
			<cl-footer :fixed="false" :vt="[spec.action]">
				<!-- 加入购物车 -->
				<template v-if="spec.action == 'spCart'">
					<cl-button custom type="primary" :disabled="disabled" @tap="toAdd"
						>确定</cl-button
					>
				</template>

				<!-- 选规格的时候 -->
				<template v-else-if="spec.action == 'select'">
					<cl-button custom :disabled="disabled" @tap="toAdd">加入购物车</cl-button>
					<cl-button custom type="primary" :disabled="disabled" @tap="toBuy"
						>立即购买</cl-button
					>
				</template>

				<!-- 立即购买 -->
				<template v-else-if="spec.action == 'buy'">
					<cl-button custom type="primary" :disabled="disabled" @tap="toBuy"
						>立即购买</cl-button
					>
				</template>

				<!-- 编辑 -->
				<template v-else-if="spec.action == 'edit'">
					<cl-button custom type="primary" :disabled="disabled" @tap="toEdit"
						>确定</cl-button
					>
				</template>
			</cl-footer>
		</view>
	</cl-popup>
</template>

<script lang="ts" setup>
import { isEmpty } from "lodash-es";
import { computed, nextTick, ref } from "vue";
import { useCool } from "/@/cool";
import { useSpec } from "/@/hooks";
import { useShoppingCart } from "/@/hooks";
import { useUi } from "/$/cool-ui";
import GoodsCover from "/@/components/goods/cover.vue";

const { service, router } = useCool();
const spec = useSpec();
const spCart = useShoppingCart();
const ui = useUi();

// 列表是否格子布局
const isGrid = ref(true);

// 加载规格中
const loading = ref(false);

// 规格列表
const list = ref<Eps.GoodsSpecEntity[]>([]);

// 库存数，减去购物车数量
const stock = computed(() => {
	const a = spec.info?.stock || 0;
	const b = spCart.list.find((e) => e.spec.id == spec.info?.id)?.count || 0;

	if (spec.action == "edit") {
		return a;
	}

	let d = a - b;

	if (d < 0) {
		d = 0;
	}

	return d;
});

// 是否能下单
const disabled = computed(() => {
	return !stock.value;
});

// 获取规格列表
async function refresh(params?: any) {
	loading.value = true;

	await service.goods.spec
		.list({
			goodsId: spec.goods?.id,
			order: "sortNum",
			sort: "desc",
			...params,
		})
		.then((res) => {
			list.value = res.map((e) => {
				let arr = e.images || [];

				if (isEmpty(arr)) {
					arr = [spec.goods?.mainPic];
				}

				return {
					...e,
					cover: arr[0],
				};
			});

			// 设置规格
			spec.set(list.value.find((e) => e.id == spec.specId));
		});

	loading.value = false;
}

// 监听打开
function onOpen() {
	refresh();
}

// 选择规格
function select(item: Eps.GoodsSpecEntity) {
	if (spec.info?.id == item.id) {
		spec.set();
	} else {
		spec.set(item);
	}

	nextTick(() => {
		spec.setNum(1);
	});
}

// 购买
function toBuy() {
	spec.close();

	router.push({
		path: "/pages/order/submit",
		params: {
			buyList: [
				{
					spec: spec.info!,
					goodsInfo: spec.goods!,
					count: spec.num,
				},
			],
		},
	});
}

// 编辑
function toEdit() {
	spec.emit("edit");
	spec.close();
}

// 加入购物车
function toAdd() {
	spCart.add({
		count: spec.num,
		spec: spec.info!,
		goodsInfo: spec.goods!,
	});

	ui.showToast("添加购物车成功");
	spec.close();
}

defineExpose({
	refresh,
});
</script>

<style lang="scss" scoped>
.goods-spec {
	.goods {
		display: flex;
		padding: 24rpx;

		.det {
			flex: 1;
			padding: 24rpx 24rpx 0 24rpx;
		}
	}

	.scroller {
		height: 50vh;

		.list {
			padding: 0 24rpx;

			.item {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				border-radius: 12rpx;
				border: 2rpx solid #eeeeee;
				padding: 12rpx;

				.cover {
					height: 80rpx;
					width: 80rpx;
					flex-shrink: 0;
				}

				.name {
					display: flex;
					align-items: center;
					padding: 0 16rpx;
					font-size: 24rpx;
					line-height: 1.4;
					flex: 1;

					text {
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}

				&.is-active {
					border-color: $cl-color-primary;
				}

				&.is-disabled {
					.cover {
						&::after {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 100rpx;
							width: 100rpx;
							content: "无货";
							color: #fff;
							background-color: rgba(50, 50, 50, 0.6);
							border-radius: 100%;
							position: absolute;
							left: calc(50% - 50rpx);
							top: calc(50% - 50rpx);
							font-size: 26rpx;
							border: 1rpx solid currentColor;
							box-sizing: border-box;
						}
					}

					.name {
						color: $cl-color-disabled;
					}
				}
			}

			&.is-grid {
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					border-radius: 28rpx;
					padding: 0;
					margin-bottom: 24rpx;

					.cover {
						height: 216rpx;
						width: 100%;
					}

					.name {
						flex: none;
						height: 70rpx;
						line-height: 1.2;
					}
				}
			}
		}
	}
}
</style>
